<template>
  <div class="purchase-return-entry">
    <el-form :inline="true" class="search-form">
      <el-form-item label="单据日期:">
        <el-date-picker
          type="daterange"
          v-model="DjDateRange"
          align="right"
          unlink-panels
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange2"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="商品:">
        <el-input v-model="select.goods" placeholder="请选择商品"></el-input>
      </el-form-item>
      <el-button style="margin-left: -10px" @click="goodsShow = true"
        >...</el-button
      >
      <el-form-item>
        <el-button type="primary" @click="selectByGood()">查询</el-button>
        <!-- <el-button @click="advancedSearch">高级搜索</el-button> -->
      </el-form-item>
    </el-form>

    <div id="main" style="width: 1200px; height: 500px"></div>

    <el-dialog top="20px" title="选择商品" :visible.sync="goodsShow">
      <GoodsChoose ref="chooseGoods" :goodsShow="goodsShow" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsShow = false">取 消</el-button>
        <el-button type="primary" @click="yesGoods">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import GoodsChoose from "../public_com/GoodsChoose.vue";

export default {
  name: "sumByCommodity",
  components: {
    GoodsChoose,
  },
  data() {
    return {
      DjDateRange: [],
      goodsShow: false,
      select: {
        startDate: "",
        endDate: "",
        goods: "",
      },
      chartData: [],
    };
  },
  methods: {
    handleDateChange2(value) {
      if (value) {
        this.select.startDate = value[0]; // 起始日期
        this.select.endDate = value[1]; // 结束日期
      } else {
        this.select.startDate = ""; // 起始日期
        this.select.endDate = ""; // 结束日期
      }
    },
    yesGoods() {
      this.goodsShow = false;
      var selectedGoods = this.$refs.chooseGoods.selectionList;
      console.log(selectedGoods);
      if (selectedGoods.length <= 0) {
        this.select.goods = "";
        return;
      }
      if (selectedGoods.length > 0) {
        this.select.goods = selectedGoods
          .map((item) => item.goodcode)
          .join(",");
      }
    },
    selectByGood() {
      this.axios
        .get("/purchase/purchaseOrderDetail/selectByGood", {
          params: {
            ...this.select,
          },
        })
        .then((rs) => {
          console.log(rs);
          this.chartData = rs.data.PurOrdByGood;
          this.initChart();
        });
    },
    initChart() {
      const chartDom = document.getElementById("main");
      if (chartDom) {
        const myChart = this.$echarts.init(chartDom);
        const goodNames = this.chartData.map(
          (item) => `${item.goodcode} - ${item.goodname}`
        );
        const totalNums = this.chartData.map((item) => item.totalNum);
        const totalMoneys = this.chartData.map((item) => item.totalMoney);

        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            data: ["数量", "金额"],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: goodNames,
          },
          yAxis: [
            {
              type: "value",
              name: "数量",
              axisLabel: {
                formatter: function (value) {
                  return value === 0 ? "0" : value;
                },
              },
            },
            {
              type: "value",
              name: "金额",
              axisLabel: {
                formatter: function (value) {
                  return value === 0 ? "0" : value;
                },
              },
            },
          ],
          series: [
            {
              name: "数量",
              type: "bar",
              yAxisIndex: 0,
              data: totalNums,
            },
            {
              name: "金额",
              type: "bar",
              yAxisIndex: 1,
              data: totalMoneys,
            },
          ],
        };

        myChart.setOption(option);
      } else {
        console.error("Element #main not found");
      }
    },
    setLastMonthDateRange() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth(); // 获取当前月份（0-11）

      const currentMonthStart = new Date(year, month, 1); // 当前月的第一天
      const currentMonthEnd = new Date(year, month + 1, 0); // 当前月的最后一天

      const startStr = currentMonthStart.toISOString().split("T")[0];
      const endStr = currentMonthEnd.toISOString().split("T")[0];

      this.DjDateRange = [startStr, endStr];
      this.handleDateChange2(this.DjDateRange);
    },
  },
  created() {
    this.setLastMonthDateRange();
    this.selectByGood();
  },
};
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}

.actions {
  margin-top: 20px;
  text-align: right;
  margin-bottom: 10px;
}

.search-form .el-button {
  margin-left: 10px;
}
</style>
